<template>
  <div>
    <n-data-table
      :loading="tableLoading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :single-line="false"
    />
    <n-modal
      :style="{ width: '500px' }"
      v-model:show="showModal"
      class="custom-card"
      preset="card"
      title="修改信息"
      size="huge"
      :bordered="false"
      :segmented="false"
    >
      <template #header-extra> </template>
      <n-flex>
        <n-form
          :model="form"
          label-placement="left"
          label-width="auto"
          :style="{ width: '100%' }"
        >
          <n-form-item label="车辆类型:">
            <n-input
              v-model:value="form.type"
              placeholder="请输入车辆类型"
              :allow-input="onlyAllow"
            />
          </n-form-item>
          <n-form-item label="车厢数量:">
            <n-input
              v-model:value="form.numberOfCarriages"
              placeholder="请输入车厢数量"
              :allow-input="onlyAllow"
            />
          </n-form-item>
          <n-form-item label="座位数:">
            <n-input
              v-model:value="form.seatCount"
              placeholder="请输入座位数"
            />
          </n-form-item>
          <n-form-item label="维修记录:">
            <n-input
              v-model:value="form.maintenanceRecord"
              placeholder="请输入维修记录"
            />
          </n-form-item>
          <n-form-item label="调度:">
            <n-select v-model:value="form.dispatchStatus" :options="options" />
          </n-form-item>
        </n-form>
      </n-flex>
      <template #footer>
        <n-flex justify="end">
          <n-button @click="showModal = false">取消</n-button>
          <n-button :loading="submitLoading" type="primary" @click="Summit()"
            >确定</n-button
          >
        </n-flex>
      </template>
    </n-modal>
  </div>
</template>
<script setup>
import { vehicleInformation, updateVehicleInformation } from "@/api";
import { NButton } from "naive-ui";
import Store from "@/stores";
const store = Store();
const tableLoading = ref(false);
const showModal = ref(false);
const submitLoading = ref(false);
const data = ref([]);
const form = ref({});
const options = ref([
  {
    label: "休息",
    value: "休息",
  },
  {
    label: "工作",
    value: "工作",
  },
  {
    label: "调度",
    value: "调度",
  },
]);
const columns = [
  {
    title: "车辆ID",
    key: "vehicleId",
  },
  {
    title: "类型",
    key: "type",
  },
  {
    title: "车厢数量",
    key: "numberOfCarriages",
    render: (item) => {
      return h("span", item.numberOfCarriages + "节");
    },
  },
  {
    title: "座位数",
    key: "seatCount",
    render: (item) => {
      return h("span", item.seatCount + "个");
    },
  },
  {
    title: "维修记录",
    key: "maintenanceRecord",
  },
  {
    title: "调度状态",
    key: "dispatchStatus",
    render: (item) => {
      return h(
        "span",
        {
          style: {
            color:
              item.dispatchStatus == "休息"
                ? "#ccc"
                : item.dispatchStatus == "工作"
                ? "green"
                : "red",
          },
        },
        item.dispatchStatus
      );
    },
  },
  {
    title: "运营时间",
    key: "operationalTimeframe",
  },
  {
    title: "行驶里程",
    key: "mileage",
    render: (item) => {
      return h("span", item.mileage / 10000 + "公里");
    },
  },
  {
    title: "当前时速",
    key: "currentSpeed",
    render: (item) => {
      return h("span", item.currentSpeed + "km/h");
    },
  },
  {
    title: "运营状态",
    key: "operatingStatus",
  },
  {
    title: "操作",
    key: "jurisdiction",

    render(item) {
      return [
        h(
          NButton,
          {
            type: "info",
            quaternary: true,
            size: "small",

            onClick: () => {
              if (store.userInfo.userName != "超级管理员") {
                return $message.error("当前账户无操作权限");
              }

              form.value = JSON.parse(
                JSON.stringify(Object.assign(item, { _id: item._id }))
              );
              showModal.value = true;
            },
          },
          { default: () => "修改" }
        ),
      ];
    },
  },
];
const pagination = {
  showSizePicker: true,
  pageSizes: [10, 30, 50, 100], //可切换的 每页条数
};
getList();
function getList(params) {
  tableLoading.value = true;
  vehicleInformation().then((res) => {
    tableLoading.value = false;
    if (res.code != 200) return $message.error(res.message);
    data.value = res.data;
  });
}
// 更新
function Summit() {
  const vehicleData = JSON.parse(JSON.stringify(form.value));
  updateVehicleInformation(vehicleData).then((res) => {
    if (res.code != 200) return $message.error(res.message);
    $message.success("更新成功");
    showModal.value = false;
    getList();
  });
}
</script>

<style lang="scss" scoped></style>
